import React, { Component } from 'react'
import { Cproduct } from "../types/product"
import { connect } from "react-redux"
interface IProps {
    item: Cproduct,
    changeCount:(id:number,num:number)=> void;
    open:()=>void
}
interface IState {

}
class CartProduct extends Component<IProps, IState> {
    render() {
        let {id, title, price, img, num,checked } = this.props.item
        return (
            <div>
                <dl className="dl">
                    <input type="checkbox" checked={checked}/>
                    <dt><img src={img} alt="" /></dt>
                    <dd>
                        <p>{title}</p>
                        <p>价钱:{price}</p>
                        <p>
                            <button onClick={()=>this.changeNum(id,num,true)}>-</button>
                            {num}
                            <button onClick={()=>this.changeNum(id,num,false)}>+</button>
                        </p>
                    </dd>
                </dl>
            </div>
        )
    }
    changeNum=(id:number,num:number,flag:boolean)=>{
        if(flag){//减
            if(num > 1){
                num = num - 1;
                this.props.changeCount(id,num)
            }else{
                this.props.open()
            }
        }else{
            //加
            num = num  +1 ;
            this.props.changeCount(id,num)
        }
    }
}
let stateMapToProps = (state: any) => {
    return{

    }
}
let dispatchMapToProps = (dispatch: any) => {
    return{
        changeCount(id:number,num:number){
            dispatch({type:"CHANGE_COUNT",id,num})
        }
    }
}
export default connect(stateMapToProps, dispatchMapToProps)(CartProduct)
